<!DOCTYPE html>
<html lang="en" xmlns:th="http://thyneleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div th:replace="/common/header"></div>
<div id="Content">
    <div id="BackLink">
        <a href="/main/enter">
            Return to Main Menu</a></div>

    <div id="Catalog">

    <h2> <th:block th:text="${category.categoryId}" /></h2>

    <style type="text/css">

        table {
            width: 700px;
            padding: 0;
            margin: 0;
        }

        caption {
            padding: 0 0 5px 0;
            width: 700px;
            font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            text-align: right;
        }

        th {
            font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 6px 6px 6px 12px;
            background: #d5eaca no-repeat;
        }

        td {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            background: #fff;
            font-size:16px;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
        }
    </style>
    <table>
        <tr>
            <th>Product ID</th>
            <th>Name</th>
        </tr>
            <tr th:each="product : ${productList}">
                <td><a th:href="${'/category/viewProduct?productId='}+${product.productId}"><th:block th:text="${product.productId}" /></a> </td>
                <td><th:block th:text="${product.name}" /></td>
            </tr>
        </c:forEach>
    </table>

</div>
</div>
<div th:replace="/common/footer"></div>
</body>
</html>